<div class="index-wrapper">
  <main class="homepage dark-border-color dark-bg">
    <app-fixbar
      (onCollapse)="onCollapseAll()"
      [collapsed]="collapsed()"
      selector=".main"
    >
    </app-fixbar>

    <nav class="top-nav user-select-none dark-border-color dark-bg">
      <a 
        *ngFor="let item of websiteList; index as i;" 
        (click)="handleCilckTopNav(i)" 
        [class.active]="page === i" 
        [class.dark-text-active]="page === i" 
        [class.remove]="!isLogin && item.ownVisible"
        class="ripple-btn dark-text"
      >
        {{ item.title }}
      </a>
    </nav>

    <section class="index-section user-select-none dark-bg">
      <aside class="sidebar dark-bg dark-border-color" id="sidebar">
        <ul *ngIf="websiteList[page]">
          <li 
            class="tag dark-text" 
            [class.active]="id === i" 
            [class.dark-item-active]="id === i" 
            (click)="handleSidebarNav(i)"
            *ngFor="let item of websiteList[page].nav; index as i" 
            [class.remove]="!isLogin && item.ownVisible"
          >
            <div class="ripple-btn">{{ item.title }}</div>
          </li>
        </ul>
      </aside>

      <div class="main dark-scrollbar">
        <app-search-engine></app-search-engine>
 
        <div *ngIf="currentList.length > 0; else noData">
          <div *ngFor="let item of currentList.slice(0, sliceMax); index as i" [class.remove]="!isLogin && item.ownVisible">
            <app-toolbar-title
              [dataSource]="item"
              (onCollapse)="onCollapse(item, i)"
              [index]="i"
            >
            </app-toolbar-title>

            <div
              style="padding: 0 10px;"
              nz-row
              [nzGutter]="[16, 16]"
              [style.display]="item.collapsed ? 'none' : ''"
            >
              <div
                class="gutter-row"
                nz-col
                [nzSpan]="8"
                *ngFor="let el of item.nav.slice(0, sliceMax); index as j"
                [class.remove]="!isLogin && el.ownVisible"
              >
                <app-card [dataSource]="el" [indexs]="[page, id, i, j]"></app-card>
              </div>
            </div>
          </div>
        </div>
        
        <ng-template #noData>
          <app-no-data></app-no-data>
        </ng-template>
      </div>
    </section>
  </main>

  <app-footer></app-footer>
</div>

<div class="layer-bg dark-bg"></div>
